<template>
  <n-checkbox-group
    :value="value"
    @update:value="updateValue"
    :disabled="disabled"
  >
    <n-space v-if="isSimpleOptions" item-style="display: flex;">
      <n-checkbox v-for="option in options" :key="option" :value="option">
        {{ option }}
      </n-checkbox>
    </n-space>

    <n-space v-else item-style="display: flex;">
      <n-checkbox
        v-for="option in options"
        :key="option.value"
        :value="option.value"
      >
        {{ option.label }}
      </n-checkbox>
    </n-space>
  </n-checkbox-group>
</template>

<script setup lang="ts">
import { isPlainObject } from "@/utils";
import { computed } from "vue";

export interface ZRadioGroupProps {
  value: any;
  options: any[];
  disabled?: boolean;
}
const props = defineProps<ZRadioGroupProps>();
const emit = defineEmits<{
  (e: "update:value", value: any): void;
}>();
const updateValue = (v: any) => {
  emit("update:value", v);
};

const isSimpleOptions = computed(() => {
  return props.options.length === 0 || !isPlainObject(props.options[0]);
});
</script>
